<template>
  <span>
    <template v-if="row[column.field] != null">
      <a-space
        v-if="
          [
            eipZeroCodeControl.radio,
            eipZeroCodeControl.checkbox,
            eipZeroCodeControl.select,
          ].includes(type)
        "
      >
        <div v-for="item in convertSelect(row, column)" :key="item.value">
          <a-button
            v-if="item.backgroundColor"
            class="eip-button"
            :style="{
              'background-color': item.backgroundColor,
              color: item.color,
            }"
            shape="round"
            size="small"
          >
            {{ item.label }}</a-button
          >
          <span v-else>
            {{ item.label }}
          </span>
        </div>
      </a-space>

      <a-space
        v-else-if="
          [eipZeroCodeControl.correlation].includes(type) &&
          options.options.showType != eipZeroCodeControlCorrelationShowType.grid
        "
      >
        <div v-for="item in convertCorrelation(row, column)" :key="item.value">
          <a-button class="eip-button-number" size="small">
            {{ item.label }}</a-button
          >
        </div>
      </a-space>
      <a-space
        v-else-if="
          [eipZeroCodeControl.correlation].includes(type) &&
          options.options.showType == eipZeroCodeControlCorrelationShowType.grid
        "
      >
        <a-button
          class="eip-button-number"
          size="small"
          icon="block"
          v-if="convertCorrelationGrid(row, column) > 0"
        >
          {{ convertCorrelationGrid(row, column) }}</a-button
        >
      </a-space>
      <a-space v-else-if="[eipZeroCodeControl.subtable].includes(type)">
        <a-button
          class="eip-button-number"
          size="small"
          icon="table"
          v-if="convertCorrelationGrid(row, column) > 0"
        >
          {{ convertCorrelationGrid(row, column) }}</a-button
        >
      </a-space>
      <a-space v-else-if="[eipZeroCodeControl.dictionary].includes(type)">
        <div v-for="item in convertCorrelation(row, column)" :key="item.value">
          <a-button
            v-if="item.color"
            :style="{
              'background-color': item.color,
            }"
            class="eip-button"
            shape="round"
            size="small"
          >
            {{ item.label }}</a-button
          >
          <span v-else>
            {{ item.label }}
          </span>
        </div>
      </a-space>

      <a-space v-else-if="[eipZeroCodeControl.district].includes(type)">
        <a-button type="primary" shape="round" size="small">
          {{ convertDistrict(row, column) }}</a-button
        >
      </a-space>

      <a-space v-else-if="[eipZeroCodeControl.map].includes(type)">
        <a-button type="link" shape="round" size="small" icon="environment">
          {{ convertMap(row, column) }}</a-button
        >
      </a-space>

      <a-rate
        v-else-if="type == eipZeroCodeControl.rate"
        v-model="row[column.field]"
        disabled
      />

      <a-progress
        v-else-if="type == eipZeroCodeControl.slider"
        :percent="row[column.field] ? row[column.field] : 0"
        disabled
      />

      <a-switch
        v-else-if="type == eipZeroCodeControl.switch"
        v-model="row[column.field]"
        disabled
      />

      <eip-file
        v-else-if="
          type == eipZeroCodeControl.uploadFile ||
          type == eipZeroCodeControl.uploadImg
        "
        :files="JSON.parse(row[column.field])"
      ></eip-file>

      <span v-else-if="type == eipZeroCodeControl.date">
        {{ convertDate(row, column) }}
      </span>
      <span v-else-if="type == eipZeroCodeControl.number">
        {{ convertNumber(row, column) }}
      </span>

      <span v-else-if="type == eipZeroCodeControl.otherField">
        {{ convertOtherField(row, column) }}
      </span>

      <span v-else-if="type == eipZeroCodeControl.formulaNumber">
        {{ convertFormulaNumber(row, column) }}
      </span>

      <span v-else> {{ row[column.field] }} </span>
    </template>
    <template v-else>
      <span v-if="type == 'sysuser'" class="run-list-user">
        <a-tag :closable="false">
          <img class="img" v-real-img-user="row[column.field + 'Header']" />
          <label style="vertical-align: middle">{{
            row[column.field + "Name"]
          }}</label>
        </a-tag>
      </span>
    </template>
  </span>
</template>

<script>
// 条形码
import VueBarcode from "vue-barcode";
import { mapGetters } from "vuex";
//二维码
import VueQr from "vue-qr";
import moment from "moment";
export default {
  components: {
    VueQr,
    VueBarcode,
  },
  name: "list-content",
  data() {
    return {};
  },
  computed: {
    ...mapGetters("account", ["zeroCode"]),
  },
  props: {
    row: {
      type: Object,
    },
    column: {
      type: Object,
    },

    type: {
      type: String,
    },

    options: {
      type: Object,
    },
  },
  methods: {
    /**
     * 格式化
     */
    convertSelect(row, column) {
      let that = this;
      var value = row[column.field];
      if (value) {
        var returnValue = [];
        var parseValue = JSON.parse(value);
        parseValue.forEach((item) => {
          var find = that.$utils.find(
            that.options.options.options,
            (f) => f.value == item
          );
          if (find) {
            returnValue.push({
              backgroundColor: that.options.options.optionsColor
                ? find.color
                : "rgba(80,120,150,.08)",
              color: that.options.options.optionsColor ? "" : "#4d4d4d",

              label: find.label,
              value: find.value,
            });
          }
        });
        return returnValue;
      } else {
        return [];
      }
    },

    /**
     * 格式化
     */
    convertCorrelation(row, column) {
      var value = row[column.field];
      if (value) {
        var returnValue = [];
        var parseValue = JSON.parse(value);
        parseValue.forEach((item) => {
          returnValue.push({
            label: item.Title,
            value: item.RowId,
            color: item.Color,
          });
        });
        return returnValue;
      } else {
        return [];
      }
    },

    /**
     * 格式化
     */
    convertCorrelationGrid(row, column) {
      var value = row[column.field];
      if (value) {
        var parseValue = JSON.parse(value);
        return parseValue.length;
      } else {
        return 0;
      }
    },

    /**
     * 格式化
     */
    convertDistrict(row, column) {
      var value = row[column.field];
      if (value) {
        var returnValue = JSON.parse(value)
          .map((m) => m.label)
          .join("/");

        return returnValue;
      } else {
        return [];
      }
    },
    /**
     * 格式化
     */
    convertMap(row, column) {
      var value = row[column.field];
      if (value) {
        var returnValue = JSON.parse(value).address;
        return returnValue;
      } else {
        return [];
      }
    },
    /**
     * 时间格式化
     */
    convertDate(row, column) {
      var options = this.options.options;
      var value = row[column.field];
      var format = options.format;
      if (format) {
        value = moment(value).format(format);
      }

      return value;
    },
    /**
     * 数量格式化
     */
    convertNumber(row, column) {
      var options = this.options.options;
      var data = row[column.field];
      if (options.percentile && data) {
        data = this.$utils.commafy(Number(data), { digits: options.precision });
      }
      var value = options.addonBefore + data + options.addonAfter;
      return value;
    },
    /**
     *
     * @param row
     * @param column
     */
    convertFormulaNumber(row, column) {
      var options = this.options.options;
      var data = row[column.field];
      if (options.percentile && data) {
        data = this.$utils.commafy(Number(data), { digits: options.precision });
      }
      var value = options.addonBefore + data + options.addonAfter;
      return value;
    },
    /**
     * 格式化关联字段
     * @param row
     * @param column
     */
    convertOtherField(row, column) {
      var data = row[column.field];
      if (this.options.options.type == this.eipZeroCodeControl.number) {
        var systemZeroCodeData = this.$utils.find(
          this.zeroCode,
          (f) => f.zeroCodeId == this.options.options.zeroCodeId
        );
        if (systemZeroCodeData) {
          var columns = JSON.parse(systemZeroCodeData.columnJson);
          //得到明细
          var columnFind = this.$utils.find(
            columns,
            (f) => f.key == this.options.options.field
          );
          var options = columnFind.options;
          //千分位
          if (options.percentile && data) {
            data = this.$utils.commafy(Number(data), {
              digits: options.precision,
            });
          }
          data = options.addonBefore + data + options.addonAfter;
        }
      }

      //判断类型
      return data;
    },

    /**
     * 组织架构点击
     * @param {*} item
     */
    scriptClick(item, row) {
      if (item.script) {
        eval(item.script);
      }
    },

    /**
     * 子表详情
     */
    batchDetail() {
      var data = {
        row: this.row,
        item: this.item,
      };
      this.$emit("batchDetail", data);
    },
  },
};
</script>

<style lang="less" scoped>
.ant-tag {
  border-radius: 40px !important;
}

.img {
  width: 23px;
  height: 23px;
  border-radius: 50%;
}

.card-container {
  background: #f5f5f5;
  overflow: hidden;
}

.card-container > .ant-tabs-card > .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}

.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  padding: 16px;
}

.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
  border: none !important;
}

/deep/ .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  border: none !important;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}

.eip-table-file {
  width: 40px;
  height: 40px;
  padding: 2px;
  cursor: pointer;
}

/deep/ .run-list-user .ant-tag {
  cursor: pointer;
  padding: 0 7px 0 0 !important;
  border-radius: 50px !important;
}

/deep/ .run-list-user .ant-tag label {
  font-size: 12px;
  margin-left: 4px;
}

.controlTags {
  align-items: center;
  border-color: @primary-color;
  display: inline-flex;
  height: 23px;
  max-width: 100%;
  vertical-align: top;
}

.controlTags .departWrap {
  align-items: center;
  border-radius: 13px;
  color: #fff;
  background-color: @primary-color;
  display: inline-flex;
  flex-shrink: 0;
  height: 23px;
  justify-content: center;
  width: 23px;
}

.hrefColor {
  color: @primary-color;
}

.eip-button {
  color: #fff;
  font-size: 12px;
  border: none;
}

.eip-button-number {
  background-color: rgba(0, 100, 240, 0.08);
  border-radius: 3px;
  padding: 0 10px;
}
</style>
